<template>
  <div class="bodyer">
    <!-- 主报告盒子 -->
    <div class="bigbox" v-if="isshow">
      <!-- 主报告页面搜索栏 -->
      <div class="topbox">
        <el-form :model="form" label-position="left" label-width="80px">
           <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="用户名称">
                <!-- <el-select v-model="form.orgNo" size="small" clearable filterable  placeholder="请选择用户" style="width: 75%;">
                  <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
                </el-select> -->
                <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="实验日期">
                <el-date-picker
                  style="width: 100%;"
                  size="small"
                  v-model="value1"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator=""
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="实验名称">
                <el-input v-model="form.trialName" style="width: 100%;" placeholder="请输入实验名称" size=small></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态">
                <el-select v-model="form.status" size="small" clearable filterable  placeholder="请选择状态" style="width: 100%;">
                  <el-option v-for="(item,index) in statuelist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: right;">
              <el-form-item label="">
                <el-button @click="getdatalist()" type="primary" size="small" >查 询</el-button>
              </el-form-item>
            </el-col>
           </el-row>
        </el-form>
      </div>
      <!-- 主报告主体盒子 -->
      <div class="bodybox">
        <div class="butti">
          <div></div>
          <div style="display: flex;">
            <span style="margin-right: 10px;"><el-button @click="xinzhen" type="primary" size="small">新 增</el-button></span>
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="table">
          <TableColumn
          ref="tabledata"
          :tableData="tableData" 
          :tableConfig="tableConfig" 
          :issize="issize">
          <el-table-column
              prop="address"
              label="操作"
              width="200">
              <template #default="{row}">
                <!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top"> -->
                  <i v-if="row.statusName=='填报'" @click="bianjizi(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="删除" placement="top"> -->
                  <i v-if="row.statusName=='填报'" @click="delzhubaogao(row)" class="el-icon-delete" style="color: red;cursor: pointer;margin-right: 20px;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="提交" placement="top"> -->
                  <el-popconfirm title="确认提交审核？" @confirm="tijiao(row)">
                    <i v-if="row.statusName=='填报'" slot="reference" class="iconfont icon-tijiao" style="color:#fdd143;margin-right: 20px; cursor: pointer;"></i>
                  </el-popconfirm>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="审核" placement="top"> -->
                  <i @click="shenhetanachuang(row)" v-if="row.statusName=='审核'" class="iconfont icon-shenhedaiban" style="color: #1afe3c;cursor: pointer;margin-right: 20px;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="下载报告" placement="top"> -->
                  <i @click="xiazaibaogao(row)" v-if="row.statusName=='完成'" class="iconfont icon-xiazai" style="color: #1a90fe;cursor: pointer;margin-right: 15px;font-size: 20px;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="详细" placement="top"> -->
                  <i @click="xiangxi(row)"  class="el-icon-view" style="color: #1a90fe;cursor: pointer;margin-right: 20px;"></i>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
          </TableColumn>
        </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageobj.pageNo"
            :page-size="20"
            @current-change="getdatalist"
            :total="+totalCount">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 子报告页面 -->
    <div v-else class="childrenbox">
      <ChildrenReport @callback="callback" :zhibaogaoform="zhibaogaoform" :zhibaogaobutton="zhibaogaobutton"></ChildrenReport>
    </div>
    <!-- 审核主报告 -->
    <div class="dialog">
      <el-dialog
        title="审核"
        :visible.sync="dialogVisible"
        width="35%">
        <div>
          <el-form :model="formshenhe" :rules="rules" label-position="right" label-width="80px" ref="formshenhe">
            <el-row>
              <el-col :span="24">
                <el-form-item label="审核意见">
                  <el-input type="textarea" v-model="formshenhe.checkSuggest" style="width: 80%;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                 <el-form-item label="审核结果" prop="checkResult">
                  <el-radio-group v-model="formshenhe.checkResult">
                    <el-radio label="1">通过</el-radio>
                    <el-radio label="0">不通过</el-radio>
                  </el-radio-group>
                 </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" >
          <el-button size="small" @click="shenhequxiao">取 消</el-button>
          <el-button size="small" type="primary" @click="shenhequeren">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getzidianxialaapi} from '@/api/guidelines'
import {getzhubaogaolistapi,delshiyanzhubaogaoapi,posttijiaoapi,postshenhezhubaogaoapi} from '@/api/Experimental-report/Main-information.js'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import ChildrenReport from './Children-Report'
import { getuserlistapi } from '@/api/analysis'
import  {ExportPdf} from '@/utils/exportpdf'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    ChildrenReport
  },
  data() {
    return {
      formshenhe: {id:''},
      rules: {
        checkResult:[
        { required: true, message: '请选择审核结果', trigger: 'change' }
        ]
      },
      isshow:true,
      value1:[],
      form: {status:'',trialName:'',orgNo:''},
      yonghulist: [],
      tableData: [],
      statuelist:[],
      issize: 'medium',
      pageobj: {
        pageNo: 1,
        pageSize:20
      },
      totalCount:'',
      tableConfig: [
        { label: '序号', type:'index',width:'70',center:'center' },
        { label: '用电单位', prop: 'orgName' },
        { label: '试验名称', prop: 'trialName' },
        { label: '试验日期', prop: 'trialDate' ,center:'center'},
        { label: '录入人员', prop: 'createrName' },
        { label: '录入日期', prop: 'createTime' ,center:'center'},
        { label: '状态', prop: 'statusName',center:'center',width:'100' },
      ],
      zhibaogaoform:{},
      dialogVisible: false,
      zhibaogaobutton:true
    };
  },

  async mounted() {
    this.getdatalist()
    // 获取用户
    const { data: { list } } = await getuserlistapi()
    this.yonghulist = list
    // 获取状态下拉
    const shujutype=await getzidianxialaapi({dictType:'SYGL_LCZT'})
    this.statuelist=shujutype.data.list
  },

  methods: {
    // 编辑
    bianjizi(row) {
      this.zhibaogaobutton=true
      this.isshow = false
      this.zhibaogaoform=row
    },
    // 新增
    xinzhen() {
      this.isshow = false
      this.zhibaogaoform={}
    },
    // 获取主报告表格数据
    async getdatalist() {
      this.$refs.tabledata=true
      const { data: { list, totalCount } } = await getzhubaogaolistapi({
        ...this.form, startDate: this.value1[0], endDate: this.value1[1],
        _pageNo: this.pageobj.pageNo - 1, _pageSize: this.pageobj.pageSize
      })
      this.totalCount = totalCount
      this.tableData = list
      this.$refs.tabledata=false
    },
    // 详细
    xiangxi(row) {
      this.zhibaogaobutton = false
      this.isshow = false
      this.zhibaogaoform=row
    },
    // 返回主报告
    callback() {
      this.isshow = true
      this.getdatalist()
    },
    // 下载报告
    xiazaibaogao(row) {
      ExportPdf('pio-microservice-biz/pio/trial-report/base/download/pdf',{id:row.id},`${row.trialName}实验主报告`)
    },
    // 审核主报告
    async shenhequeren() {
      await this.$refs.formshenhe.validate()
      await postshenhezhubaogaoapi({ ...this.formshenhe }).then(ele => {
        this.$message({
              type: ele.code == '200' ? 'success' : 'warning',
              message:ele.data.content
            })
      })
      this.getdatalist()
      this.shenhequxiao()
    },
    // 审核弹窗
    shenhetanachuang(row) {
      this.dialogVisible = true
      this.formshenhe.id=row.id
    },
    // 审核弹窗关闭
    shenhequxiao() {
      this.dialogVisible = false
      this.formshenhe = { id: '' }
      this.resetFields$refs.formshenhe.resetFields()
    },
    // 提交主报告
    async tijiao(row) {
      await posttijiaoapi({ id: row.id }).then(ele => {
        this.$message({
              type: ele.code == '200' ? 'success' : 'warning',
              message:ele.data.content
            })
      })
      this.getdatalist()
    },
    // 删除主报告
    delzhubaogao(row) {
      console.log(row);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delshiyanzhubaogaoapi({ id: row.id }).then(ele => {
            this.$message({
              type: ele.code == '200' ? 'success' : 'warning',
              message:ele.data.content
            })
          })
          this.getdatalist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 导出
    daochu() {
      exportexcel('pio-microservice-biz/pio/trial-report/base/excel',{...this.form, startDate: this.value1[0], endDate: this.value1[1],},'试验报告数据')
    },
    // 刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
    command(val) {
        if (val === '默认') {
          this.issize = 'medium'
        } else if (val === '中等') {
          this.issize = 'small'
        } else {
          this.issize = 'mini'
        }
      },
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
 .bodyer{
  height: 100%;
  padding: 10px;
   .childrenbox{
      height: 100%;
    }
    .dialog{
      .button{
      width: auto;
      height: 30px;
      padding: 0 10px;
     }
    }
   .bigbox{
    height: 100%;
     .topbox{
      padding: 20px;
      height: 80px;
      background-color: #fff;
      margin-bottom: 10px;
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: #fff;
      }
    }
    .bodybox{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .butti{
      display: flex;
      justify-content: space-between;
      .button{
        width: 60px;
        height: 30px;
        border: none;
        border-radius: 3px;
        background-color: #3b8eea;
        color: #fff;
        margin-right: 10px;
      }
    }
    .table{
      height: 88%;
      margin: 10px 0;
    }
    .fenye{
      text-align: right;
    }
    }
   }
 }
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-radio{
  margin-right: 20px;
}
</style>